<template>
   <div id="rightbottom" style="height: 89%; width: 100%;"></div>
  <div id="year" style="height: 10%; width: 100%;position: relative">
    <h3 class="time-display">{{ year === 771 ? 770 : year }}</h3>
  </div>
 
</template>

<script>
import * as echarts from 'echarts';
import { option } from './option.js';
import rightbottom from '@/assets/json/时间.json';
export default {
 data() {
    return {
      // name: ['北京', '重庆', '河北', '山西', '江苏', '浙江', '安徽', '江西', '山东', '河南', '湖北', '湖南', '四川', '陕西'],
      name: ['四川省', '山东省', '河南省', '湖北省', '湖南省', '甘肃省', '重庆市', '陕西省'],
      mychart: null,
      myoption: option,
      mydate: rightbottom,
      year: 736,
      update: [0, 0, 0, 0, 0, 0, 0, 0,]
    };
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("rightbottom"));
    this.myoption.series[0].data = this.update
    this.myoption.yAxis.data = this.name
    window.addEventListener('resize', () => {
      this.myChart.resize();
    });
    let run = () => {
      this.year += 1
      if (this.year <= 770) {
        for (let i = 0; i < this.name.length; i++) {
          for (let key in this.mydate[this.year]) {
            if (this.name[i] === key) {
              this.update[i] += this.mydate[this.year][key]
            }
          }
        }
      } else {
        this.update = [0, 0, 0, 0, 0, 0, 0, 0]
        this.year = 736
      }
      this.myoption.series[0].data = this.update
      const data = this.update
      this.myChart.setOption({
        series: [
          {
            type: 'bar',
            data
          }
        ]
      });
    }

    setTimeout(function () {
      run();
    }, 0);
    setInterval(function () {
      run();
    }, 1000);

    option && this.myChart.setOption(this.myoption);
     window.onresize=function(){
            //console.log('window.onresize...')
            //调用实例对象的resize方法
            // this.myChart.resize()
        }
  },
}

</script>@/assets/json/时间.json

<style>
#rightbottom{
    width: 100%;
    height: 100%;
}
.time-display {
  position: absolute;
  right: 8%;
  /* top: '20%'; */
  font-size: 30px; /* 调整字体大小，如果需要 */
  color:#005C80; /* 调整字体颜色，如果需要 */
}

</style>